<template>
  <el-popover
    ref="popoverIcon"
    placement="bottom-start"
    width="100%"
    :teleported="false"
    popper-class="menu-icon"
    trigger="click"
  >
    <div class="select-icon">
      <el-input
        v-model="iconName"
        clearable
        prefix-icon="search"
        placeholder="请输入图标名称"
        @clear="filterIcons"
        @input="filterIcons"
      />
      <div class="select-icon-body">
        <el-scrollbar max-height="200px">
          <el-row :gutter="10" class="select-icon-list">
            <el-col
              v-for="(item, index) in iconList"
              :key="index"
              :lg="6"
              :md="8"
              :sm="8"
              :xs="8"
            >
              <div class="select-icon-list-item" @click="changeIcon(item)">
                <SvgIcon :name="item" :size="24" />
                <div class="select-icon-list-name">{{ item }}</div>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
    </div>

    <template #reference>
      <el-input
        v-model="selectedIcon"
        placeholder="点击选择图标"
        readonly
      >
        <template #prefix>
          <SvgIcon :name="selectedIcon" v-if="selectedIcon" />
          <el-icon v-else>
            <Search />
          </el-icon>
        </template>
        <template #suffix>
          <el-icon style="cursor: pointer;" v-if="selectedIcon" @click.stop="changeIcon('')">
            <CircleClose />
          </el-icon>
        </template>
      </el-input>
    </template>
  </el-popover>
</template>

<script name="SelectIcon" setup>
import { ref, unref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const icons = []

const modules = import.meta.glob('@/assets/svg/*.svg')
for (const path in modules) {
  const name = path.split('assets/svg/')[1].split('.svg')[0]
  icons.push(name)
}

const popoverIcon = ref()

// 已选图标
const selectedIcon = ref(props.modelValue)

// 过滤图标
const iconName = ref('')

// 图标列表
const iconList = ref(icons)

const emit = defineEmits(['update:modelValue'])

const filterIcons = () => {
  iconList.value = icons
  if (iconName.value) {
    iconList.value = icons.filter(item => item.includes(iconName.value))
  }
}

const changeIcon = (name) => {
  selectedIcon.value = name
  unref(popoverIcon)?.hide()
  emit('update:modelValue', name)
}

watch(
  () => props.modelValue,
  (newValue) => {
    selectedIcon.value = newValue
    iconName.value = ''
    iconList.value = icons
  }
)

</script>

<style lang="scss" scoped>
.select-icon {
  &-body {
    position: relative;
  }
  :deep(.el-scrollbar__bar.is-horizontal) {
    display: none !important;
  }

  &-list {
    &-item {
      margin-top: 10px;
      padding: 10px 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      border: 1px solid var(--el-border-color);
    }

    &-name {
      width: 100%;
      text-align: center;
      margin-top: 8px;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
